<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .cover {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .dialog {
            width: 600px;
            height: 400px;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            border: 1px solid #000;
            background-color: white;
        }

        .title {
            line-height: 50px;
            border-bottom: 1px solid #000;
            padding-left: 30px;
        }

        .body {
            line-height: 300px;
            text-align: center;
            border-bottom: 1px solid #000;
        }

        .foot {
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .foot button {
            padding: 10px;
        }
    </style>
</head>

<body>

    <!-- <div class="cover">
        <div class="dialog">
            <div class="title">警告</div>
            <div class="body">确定删除吗</div>
            <div class="foot">
                <button>确定</button>
            </div>
        </div>
    </div> -->

    <script>

        // 
        class dialog {
            constructor() {
                this.data = [
                    {
                        name : 'danger' ,
                        title : '危险' ,
                        text : '确定要删除我吗？' ,
                        bgcolor : 'red'
                    } ,
                    {
                        name : 'success' ,
                        title : '成功' ,
                        text : '恭喜你' ,
                        bgcolor : 'green'
                    } ,
                    {
                        name : 'info' ,
                        title : '提示' ,
                        text : '吃饭了吗' ,
                        bgcolor : 'skyblue'
                    } 
                ]
                this.createHTML() ;
                this.event()
            }

            // 只调用一次
            createHTML() {
                // 创建 cover
                this.oCover = document.createElement('div');
                this.oCover.classList.add('cover')
                // css(this.oCover, {
                //     position: 'fixed',
                //     left: 0,
                //     right: 0,
                //     top: 0,
                //     bottom: 0,
                //     backgroundColor: 'rgba(0,0,0,0.4)',
                // });

                // 创建 
                const oDialog = document.createElement('div');
                css(oDialog, {
                    width: '600px',
                    height: '400px',
                    position: 'fixed',
                    left: 0,
                    right: 0,
                    top: 0,
                    bottom: 0,
                    margin: 'auto',
                    border: '1px solid #000',
                    backgroundColor: 'white',
                })


                // 创建 标题 
                this.oTitle = document.createElement('div');
                css(this.oTitle, {
                    height: '50px',
                    lineHeight: '50px',
                    borderBottom: '1px solid #000',
                    paddingLeft: '30px',
                })

                // 创建 body
                this.oBody = document.createElement('div');
                css(this.oBody, {
                    height : '300px',
                    lineHeight: '300px',
                    borderBottom: '1px solid #000',
                    textAlign: 'center'
                })
                // 创建 foot
                this.oFoot = document.createElement('div');
                css(this.oFoot, {
                    height: '50px',
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                })

                // 创建按钮
                this.oBtn = document.createElement('button');
                this.oBtn.innerHTML = '确定'
                css(this.oBtn, {
                    padding: '10px'
                })

                // 插入节点
                this.oFoot.appendChild(this.oBtn);
                oDialog.appendChild(this.oTitle)
                oDialog.appendChild(this.oBody)
                oDialog.appendChild(this.oFoot)
                this.oCover.appendChild(oDialog)
                document.body.appendChild(this.oCover)
            }

            event() {
                // 关闭弹窗
                this.oBtn.onclick = () => {
                    css(this.oCover , {
                        display : 'none'
                    })
                }
            }


            // 每次都要调用
            init(type , bodyText) {
                // type 就是弹窗的类型
                // 找到对应的数据
                const res = this.data.filter(item => item.name === type)[0];
                this.oTitle.innerHTML = res.title ;
                this.oBody.innerHTML = bodyText || res.text ;
                css(this.oTitle , {
                    backgroundColor : res.bgcolor
                })
            }
        }


        const d1 = new dialog() ;
        d1.init('info' , '普通的提示你，饿了吗');


        const d2 = new dialog() ;
        d2.init('danger' , '危险的提示你，饿死了');



        // 多次实例化的时候，会多次创建标签



        // 设置样式
        function css(ele, options) {
            for (let k in options) {
                ele.style[k] = options[k]
            }
        }

    </script>

</body>

</html>